<template>
  <div>
    <content-router></content-router>
    <div class="pd-20">
      <!-- 协议主题 -->
      <el-divider border-style="dashed" class="divider-content">
        <div class="flex flex-ac">
          <div class="title-icon mr-5 c-f">
            1
          </div>
          <div>
            协议主题
          </div>
        </div>
      </el-divider>
      <el-card shadow="never">
        <el-form class="flex flex-w" :model="form" label-width="120px" size="default">
          <el-form-item class="form-item" label="协议客户">
            <el-button class="mr-10" @click="clientForm.show = true; clientForm.select = form.client_name">选择客户</el-button>
            <div class="fs-12">
              {{ form.client_name }}
            </div>
          </el-form-item>
          <el-form-item class="form-item" label="协议状态">
            <el-select v-model="form.agreementStatus" class="m-2" placeholder="请选择协议状态">
              <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item class="form-item" label="进购指标">
            <!-- <el-select v-model="form.agreementStatus" class="m-2" placeholder="请选择进购指标">
                      <el-option label="金额" value="price" />
                      <el-option label="数量" value="num" />
                    </el-select> -->
            <el-input v-model="form.purchase_index" placeholder="输入金额/数量" class="w-200" />
          </el-form-item>
          <el-form-item class="form-item" label="纯销指标">
            <!-- <el-select v-model="form.agreementStatus" class="m-2" placeholder="请选择纯销指标">
                      <el-option label="金额" value="price" />
                      <el-option label="数量" value="num" />
                    </el-select> -->
            <el-input v-model="form.sales_index" placeholder="输入金额/数量" class="w-200" />
          </el-form-item>
          <el-form-item class="form-item" label="销售区域">
            <el-button class="mr-10" @click="areaForm.show = true; areaForm.select = form.area">选择区域</el-button>
            <el-tag size="large" v-for="(item, index) in form.area" :key="index" class="mr-5" closable
              @close="delArea(index)">{{ item }}</el-tag>
          </el-form-item>
          <el-form-item class="form-item" label="签订时间">
            <el-date-picker v-model="form.time" type="datetime" placeholder="请选择签订时间" @change="timeChang"
              value-format="x" />
          </el-form-item>
          <el-form-item class="form-item" label="购进渠道">
            <el-select v-model="form.channel" class="mr-10" @change="channelChange" placeholder="请选择进购渠道">
              <el-option label="指定渠道" value="assign" />
              <el-option label="特殊渠道" value="special" />
            </el-select>
            <el-button class="mr-10">请选择渠道</el-button>
          </el-form-item>
        </el-form>
        <div class="channel-table-box">
          <el-table :data="channelList" :highlight-current-row="true" size="small"
            header-cell-class-name="channel-table-header" style="width: 100%">
            <el-table-column prop="code" label="指定渠道编码" />
            <el-table-column prop="name" label="指定渠道名称" />
            <el-table-column prop="address" label="所在省" />
          </el-table>
        </div>
      </el-card>
      <!-- 产品政策 -->
      <el-divider border-style="dashed" class="divider-content">
        <div class="flex flex-ac">
          <div class="title-icon mr-5 c-f">
            2
          </div>
          <div>
            产品政策
          </div>
        </div>
      </el-divider>
      <div class="flex flex-ac fs-13">
        <div class="flex flex-ac mr-30 flex-w">
          <div class="mr-10">
            <el-button type="primary" @click="addGoodsShow">添加产品</el-button>
          </div>
          <div class="flex-none">
            进购总指标(万元) : ￥152.62
          </div>
        </div>
        <div class="flex flex-ac mr-30 flex-w">
          <span class="flex-none">
            指标按季度分解(万元) :
          </span>
          <span class="mr-5">
            【Q1】￥12.5,
          </span>
          <span class="mr-5">
            【Q2】￥12.5,
          </span>
          <span class="mr-5">
            【Q3】￥12.5,
          </span>
          <span class="mr-5">
            【Q4】￥12.5
          </span>
        </div>
        <div class="flex flex-ac mr-30 flex-w">
          <span class="flex-none">
            纯销总指标(万元) :
          </span>
          <span>
            ￥152.65
          </span>
        </div>
      </div>
      <el-card shadow="never" class="mt-10" v-for="(item, index) in form.goodsList" :key="index">
        <template #header>
          <div class="card-header flex flex-ac flex-sb">
            <div class="flex flex-ac">
              <div class="mr-15">
                <span class="fs-13">产品：</span>
                <el-button size="small" @click="goodsEditShow(item, index)">选择产品</el-button>
                <el-button type="primary" link size="small">
                  {{ item.name }}
                </el-button>
              </div>
              <div class="flex flex-ac fs-13">
                <span>协议效期：</span>
                <el-date-picker v-model="item.indata" type="daterange" value-format="x" range-separator="-"
                  start-placeholder="开始时间" end-placeholder="结束时间" size="small" @change="timeChang" />
              </div>
            </div>
            <div>
              <el-button type="danger" size="small" @click="delGoods(index)">删除</el-button>
            </div>
          </div>
        </template>
        <div class="card-body">
          <el-table :data="goodsList" border :highlight-current-row="true" size="small"
            header-cell-class-name="channel-table-header" style="width: 100%">
            <el-table-column prop="negotiated_peice" label="协议价(元)">
              <el-input v-model="item.negotiated_peice" size="small" placeholder="请输入" clearable />
            </el-table-column>
            <el-table-column prop="ticket_discount" label="票折(元)">
              <el-input v-model="item.ticket_discount" size="small" placeholder="请输入" clearable />
            </el-table-column>
            <el-table-column prop="purchase_target_big" label="购进指标量(大单位)">
              <el-input v-model="item.purchase_target_big" size="small" placeholder="请输入" clearable />
            </el-table-column>
            <el-table-column prop="purchase_target_small" label="购进指标量(小单位)">
              <el-input v-model="item.purchase_target_small" size="small" placeholder="请输入" clearable />
            </el-table-column>
            <el-table-column prop="purchase_price" label="购进金额(万元)">
              <el-input v-model="item.purchase_price" size="small" placeholder="请输入" clearable />
            </el-table-column>
            <el-table-column prop="pure_pin_small" label="纯销指标量(小单位)">
              <el-input v-model="item.pure_pin_small" size="small" placeholder="请输入" clearable />
            </el-table-column>
            <el-table-column prop="pure_pin_price" label="纯销指标金额(万元)">
              <el-input v-model="item.pure_pin_price" size="small" placeholder="请输入" clearable />
            </el-table-column>
          </el-table>
          <el-table class="mt-10" :data="goodsList" border :highlight-current-row="true" size="small"
            header-cell-class-name="channel-table-header" style="width: 100%">
            <el-table-column prop="distribution" label="分销奖励">
              <el-input v-model="item.distribution" size="small" placeholder="请输入" clearable />
            </el-table-column>
            <el-table-column prop="expense_subject_one" label="费用科目">
              <el-select v-model="item.expense_subject_one" size="small" placeholder="请选择进购渠道">
                <el-option v-for="(item, index) in expenseOpstion" :key="index" :label="item.lable" :value="item.value" />
              </el-select>
            </el-table-column>
            <el-table-column prop="retail" label="零售配送">
              <el-input v-model="item.retail" size="small" placeholder="请输入" clearable />
            </el-table-column>
            <el-table-column prop="expense_subject_two" label="费用科目">
              <el-select v-model="item.expense_subject_two" size="small" placeholder="请选择进购渠道">
                <el-option v-for="(item, index) in expenseOpstion" :key="index" :label="item.lable" :value="item.value" />
              </el-select>
            </el-table-column>
            <el-table-column prop="distributor" label="医疗配送商">
              <el-input v-model="item.distributor" size="small" placeholder="请输入" clearable />
            </el-table-column>
            <el-table-column prop="expense_subject_three" label="费用科目">
              <el-select v-model="item.expense_subject_three" size="small" placeholder="请选择进购渠道">
                <el-option v-for="(item, index) in expenseOpstion" :key="index" :label="item.lable" :value="item.value" />
              </el-select>
            </el-table-column>
            <el-table-column prop="custom_seven" label="自定义7">
              <el-date-picker v-model="item.custom_seven" size="small" type="dates" placeholder="请选择" @change="timeChang"
                value-format="x" />
            </el-table-column>
            <el-table-column prop="custom_eight" label="自定义8">
              <el-date-picker v-model="item.custom_eight" size="small" type="dates" placeholder="请选择" @change="timeChang"
                value-format="x" />
            </el-table-column>
          </el-table>
        </div>
      </el-card>
      <!-- 补充协议 -->
      <el-divider border-style="dashed" class="divider-content">
        <div class="flex flex-ac">
          <div class="title-icon mr-5 c-f">
            2
          </div>
          <div>
            补充协议
          </div>
        </div>
      </el-divider>
      <div>
        <div class="header flex flex-sb flex-ac">
          <div class="header-left flex flex-ac">
            <div class="left-item" v-for="(item, index) in form.protocolList" :key="item"
              :class="protocolIndex == index ? 'is_active' : ''" @click="tabsClick(index)">
              补充协议{{ index + 1 }}
            </div>
          </div>
          <div class="header-right">
            <el-button type="primary" size="small" @click="addTabs">新增</el-button>
          </div>
        </div>
        <el-card shadow="never" v-if="form.protocolList.length">
          <div class="flex flex-ac flex-sb">
            <span class="fs-13">协议内容：</span>
            <el-button type="danger" size="small" @click="delTabs">删除</el-button>
          </div>
          <el-input class="mt-10" v-model="protocloContent" :rows="5" type="textarea" placeholder="请输入" />
        </el-card>
      </div>
    </div>
    <!-- 弹窗 -->
    <!-- 产品 -->
    <el-dialog v-model="goodsForm.show" title="选择产品" width="30%" @closed="goodsDialogClosed">
      <div class="dialog-body">
        <el-tabs v-model="goodsForm.active">
          <el-tab-pane v-for="value in goodsForm.list" :label="value.title" :name="value.type">
            <div class="goods-list flex flex-ac flex-w">
              <div class="goods-item" v-for="(item, index) in value.list" :key="index"
                :class="goodsForm.name == item ? 'is_active' : ''" @click="selectGoods(item)">
                {{ item }}
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="goodsForm.show = false">取消</el-button>
          <el-button v-if="goodsForm.button_type == 'create'" type="primary" @click="addGoods">
            添加
          </el-button>
          <el-button v-if="goodsForm.button_type == 'edit'" type="primary" @click="goodsEdit">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 客户 -->
    <el-dialog v-model="clientForm.show" title="选择客户" width="30%">
      <div class="dialog-body">
        <el-select style="width:100%" v-model="clientForm.select" filterable remote reserve-keyword placeholder="请选择客户"
          :remote-method="clientChange" :loading="clientForm.loading">
          <el-option v-for="item in clientForm.list" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="clientForm.show = false">取消</el-button>
          <el-button type="primary" @click="editClient">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 地址 -->
    <el-dialog v-model="areaForm.show" title="选择区域" width="30%">
      <div class="dialog-body">
        <el-select style="width:100%" multiple v-model="areaForm.select" filterable remote reserve-keyword
          placeholder="请选择区域" :remote-method="areaChange" :loading="areaForm.loading">
          <el-option v-for="item in areaForm.list" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="areaForm.show = false">取消</el-button>
          <el-button type="primary" @click="editArea">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
</div>
</template>
<script>
import ContentRouter from '@/components/content-router.vue';
export default {
  name: 'index',
  components: {
    ContentRouter
  },
  data: () => {
    return {
      protocloContent: '',
      protocolIndex: 0,
      // 产品
      goodsForm: {
        button_type: 'create',
        index: 0,
        show: false,
        active: 'chinese',//药品类型
        name: '',//药品名称
        list: [
          {
            type: 'chinese',
            title: '中药',
            list: [
              '中测试', '中测试1', '中测试2', '中测试3', '中测试4', '中测试5', '中测试6'
            ]
          },
          {
            type: 'western',
            title: '西药',
            list: [
              '西测试', '西测试1', '西测试2', '西测试3', '西测试4', '西测试5', '西测试6'
            ]
          }
        ]
      },
      form: {
        client_name: '上海正也医药有限公司',
        agreementStatus: '',
        purchase_index: '',//购进指标
        sales_index: '',//纯销指标
        area: ['全国'],
        time: '',
        channel: 'assign',
        //指定渠道列表
        assignList: [
          { code: 'BJ000090', name: '宁波九州通药业有限公司', address: '浙江省' },
          { code: 'BJ000090', name: '宁波九州通药业有限公司', address: '浙江省' },
          { code: 'BJ000090', name: '宁波九州通药业有限公司', address: '浙江省' }
        ],
        // 特殊渠道列表
        specialList: [
          { code: 'BJ000090', name: '宁波九州通药业有限公司', address: '浙江省' },
          { code: 'BJ000090', name: '宁波九州通药业有限公司', address: '浙江省' }
        ],
        goodsList: [{
          type: 'western',
          name: '美复胶丸 24粒/盒',
          indata: [1677081600000, 1680192000000],
          negotiated_peice: '',
          ticket_discount: '',
          purchase_target_big: '',
          purchase_target_small: '',
          purchase_price: '',
          pure_pin_small: '',
          pure_pin_price: '',
          distribution: '',
          expense_subject_one: 'one',
          retail: '',
          expense_subject_two: 'one',
          distributor: '',
          expense_subject_three: 'one',
          custom_seven: '',
          custom_eight: ''
        }],
        protocolList: ['测试协议1', '测试协议2']
      },
      // 渠道表格数据
      channelList: [
        { code: 'BJ000090', name: '宁波九州通药业有限公司', address: '浙江省' },
        { code: 'BJ000090', name: '宁波九州通药业有限公司', address: '浙江省' },
        { code: 'BJ000090', name: '宁波九州通药业有限公司', address: '浙江省' }
      ],
      // 产品数据
      goodsList: [{}],
      // 协议状态选择
      statusList: [
        { value: 0, label: '测试' },
        { value: 1, label: '正常' }
      ],
      expenseOpstion: [
        {
          lable: '选项1',
          value: 'one'
        },
        {
          lable: '选项2',
          value: 'two'
        }
      ],
      // 客户
      clientForm: {
        show: false,
        select: '',
        loading: false,
        list: [],
        opstion: [
          { value: '上海正也医药有限公司', label: '上海正也医药有限公司' },
          { value: '上海正也面试测试1', label: '上海正也面试测试1' },
          { value: '上海正也面试测试2', label: '上海正也面试测试2' },
          { value: '上海正也面试测试3', label: '上海正也面试测试3' },
          { value: '上海正也面试测试4', label: '上海正也面试测试4' },
          { value: '上海正也面试测试5', label: '上海正也面试测试5' },
          { value: '上海正也面试测试6', label: '上海正也面试测试6' },
          { value: '上海正也面试测试7', label: '上海正也面试测试7' },
          { value: '上海正也面试测试8', label: '上海正也面试测试8' }
        ]
      },
      // 区域
      areaForm: {
        show: false,
        select: [],
        loading: false,
        list: [],
        opstion: [
          { value: '全国', label: '全国' },
          { value: '上海', label: '上海' },
          { value: '北京', label: '北京' },
          { value: '广州', label: '广州' },
          { value: '武汉', label: '武汉' },
          { value: '深圳', label: '深圳' },
          { value: '山东', label: '山东' },
          { value: '香港', label: '香港' },
          { value: '澳门', label: '澳门' }
        ]
      }
    }
  },
  watch: {
    protocolIndex(newVal) {
      if (newVal >= 0) {
        this.protocloContent = this.form.protocolList[newVal];
      }
    },
    protocloContent(newVal) {
      this.form.protocolList[this.protocolIndex] = newVal;
    }
  },
  created() {
    this.protocloContent = this.form.protocolList[this.protocolIndex];
  },
  methods: {
    timeChang(value) {
      console.log(value);
    },

    // 渠道变化
    channelChange(value){
        if(value == 'special'){
          this.channelList = this.form.specialList;
        }else{
          this.channelList = this.form.assignList;
        }
    },
    // 添加补充协议
    addTabs() {
      this.form.protocolList.push('');
      this.protocolIndex = this.form.protocolList.length - 1
    },
    // 标签点击事件
    tabsClick(index) {
      if (this.protocolIndex !== index) {
        this.protocolIndex = index;
        this.protocloContent = this.form.protocolList[index];
      }
    },
    // 删除协议
    delTabs() {
      this.$messageBox.confirm(
        '确定删除此条协议?',
        '警告',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
        .then(() => {
          this.form.protocolList.splice(this.protocolIndex, 1);
          if (this.protocolIndex != 0) {
            this.protocolIndex -= 1;
          }
          if (this.form.protocolList.length != 0) {
            this.protocloContent = this.form.protocolList[this.protocolIndex];
          }
          this.$message({
            message: '已删除',
            type: 'success'
          })
        })
        .catch(() => {
          this.$message({
            message: '已取消',
            type: 'warning'
          })
        })
    },
    // 添加产品显示弹窗
    addGoodsShow() {
      this.goodsForm.show = true;
      this.goodsForm.name = '';
      this.goodsForm.button_type = 'create';
    },
    // 选择产品
    selectGoods(item) {
      this.goodsForm.name = item;
    },
    // 添加产品
    addGoods() {
      if (!this.goodsForm.name) {
        this.$message({
          message: '请选择产品',
          type: 'warning'
        });
        return;
      }
      let form = {
        type: this.goodsForm.active,
        name: this.goodsForm.name,
        indata: [],
        negotiated_peice: '',
        ticket_discount: '',
        purchase_target_big: '',
        purchase_target_small: '',
        purchase_price: '',
        pure_pin_small: '',
        pure_pin_price: '',
        distribution: '',
        expense_subject_one: 'one',
        retail: '',
        expense_subject_two: 'one',
        distributor: '',
        expense_subject_three: 'one',
        custom_seven: '',
        custom_eight: ''
      };
      this.form.goodsList.push(form);
      this.goodsForm.show = false;
    },
    // 选择产品显示
    goodsEditShow(item, index) {
      this.goodsForm.active = item.type;
      this.goodsForm.name = item.name;
      this.goodsForm.index = index;
      this.goodsForm.button_type = 'edit';
      this.goodsForm.show = true;
    },
    // 选择产品确认
    goodsEdit() {
      this.form.goodsList[this.goodsForm.index].name = this.goodsForm.name;
      this.form.goodsList[this.goodsForm.index].type = this.goodsForm.active;
      this.goodsForm.show = false;
    },
    //, 删除产品
    delGoods(index) {
      this.$messageBox.confirm(
        '确定删除此产品?',
        '警告',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
        .then(() => {
          this.form.goodsList.splice(index, 1);
          this.$message({
            message: '已删除',
            type: 'success'
          })
        })
        .catch(() => {
          this.$message({
            message: '已取消',
            type: 'warning'
          })
        })
    },
    // 产品弹窗关闭之后的操作
    goodsDialogClosed() {
      this.goodsForm.name = '';
      this.goodsForm.index = 0;
    },
    // 删除地址
    delArea(index) {
      this.$messageBox.confirm(
        '确定删除此地址?',
        '警告',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
        .then(() => {
          this.form.area.splice(index, 1);
        })
        .catch((err) => {
          console.log(err);
        })
    },
    // 客户选择弹窗
    clientChange(query) {
      if (query) {
        this.clientForm.loading = true;
        setTimeout(() => {
          this.clientForm.loading = false
          this.clientForm.list = this.clientForm.opstion.filter((item) => {
            return item.label.toLowerCase().includes(query.toLowerCase())
          })
        }, 200)
      } else {
        this.clientForm.list = []
      }
    },
    // 选择按钮
    editClient() {
      this.form.client_name = this.clientForm.select;
      this.clientForm.show = false;
    },
    // 选择地址弹窗
    areaChange(query) {
      if (query) {
        this.areaForm.loading = true;
        setTimeout(() => {
          this.areaForm.loading = false
          this.areaForm.list = this.areaForm.opstion.filter((item) => {
            return item.label.toLowerCase().includes(query.toLowerCase())
          })
        }, 200)
      } else {
        this.areaForm.list = []
      }
    },
    // 选择按钮
    editArea() {
      this.form.area = this.areaForm.select;
      this.areaForm.show = false;
    }
  }
}
</script>

<style scoped>
.title-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  text-align: center;
  line-height: 20px;
  background-color: #4E8CFD;
}

.form-item {
  flex: none;
  width: 50%;
}

.channel-table-box {
  padding-left: 120px;
}

.left-item {
  padding: 5px 10px;
  border: 1px solid #EAEAEA;
  font-size: 13px;
  color: #A7A7A7;
  background: #fff;
  transition: all 0.3s;
}

.left-item:hover {
  cursor: pointer;
  color: #3EA3FE;
}

.left-item.is_active {
  color: #3EA3FE;
}

/* 产品 */
.goods-item {
  font-size: 13px;
  padding: 5px 10px;
  border: 1px solid #000;
  margin: 5px;
  ;
  transition: all 0.3s;
}

.goods-item:hover {
  color: #FFB27D;
  border-color: #FFB27D;
  cursor: pointer;
}

.goods-item.is_active {
  color: #FFB27D;
  border-color: #FFB27D;
}

.w-200 {
  max-width: 200px;
}
</style>

<style>
.divider-content .el-divider__text {
  background-color: #f5f5f5;
}

.channel-table-header {
  background: #F8F8F8 !important;
}
</style>